<template>
    <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="搜索： "> 
                <el-input placeholder="请输入小区关键字" prefix-icon="el-icon-search" v-model="searchForm.text" @keyup.enter.native="fetchData"></el-input>
            </el-form-item>

            <el-form-item> 
                <el-button style="margin-left:20px;" type="primary" @click="fetchData">搜索</el-button>
            </el-form-item>

            <el-form-item style="float: right;"> 
                <el-button type="success" @click="exportData">导出</el-button>
            </el-form-item>

        </el-form>

        <el-table :data="list" stripe border fit highlight-current-row fixed style="width: 100%"
        v-loading="listLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">

          
            <el-table-column label="序号" prop="number"></el-table-column>
            <el-table-column label="小区名称" prop="name"></el-table-column>
            <el-table-column label="单价" prop="price"></el-table-column>
            <el-table-column label="评估总价" prop="amount"></el-table-column>
            
        </el-table>

        <el-pagination style="margin: 30px 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            :small="device==='mobile'">
        </el-pagination>
        
    </div>
</template>

<script>
import { APIgetHouseList, APIexportData } from 'api'

export default {
    data() {
        return {

            searchForm: {
                text: ""
            },

            pageNum: 1,
            pageSize: 20,
            listTotal: 0,
            list: null,
            listLoading: true,
        }
    },

    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {

            this.list = null;
            this.listLoading = true;

            let ops = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                text: this.searchForm.text,
                host: 'liuhaojie'
            }
            
            APIgetHouseList(ops).then(res => {


                this.$set(this.$data, 'list', res.result.list);

                this.listTotal = res.result.count;

                this.listLoading = false;

            })
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);

            this.pageNum = 1;
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {

            this.pageNum = val;
            this.fetchData()
            // console.log(`当前页: ${val}`);
        },

        exportData(){
            
            let ops = {
                text: this.searchForm.text,
                host: 'liuhaojie'
            }
            
            APIexportData(ops).then(res => {
                let tempwindow = window.open('_blank'); // 先打开页面
                tempwindow.location = encodeURI('https://www.lunzi.online/' + res.result.filePath); // 后更改页面地址
            })
        }

    }
}
</script>
<style>
.app-container{ padding: 20px; background-color: #fff;}
</style>
